<template>
  <view class="container">
    <view class="header">
      <view class="list">
        <view class="left">
          <view class="title">欢迎使用</view>
          <view class="small-title">防伪查询小程序</view>
        </view>

        <view
          class="right"
          @click="ToBusiness"
          v-if="
            Object.getOwnPropertyNames(business).length === 0 ||
            Object.hasOwnProperty(business) === false
          "
        >
          <image src="/static/images/user-circle.png" />
          登录
        </view>

        <view class="right" @click="ToBusiness" v-else>
          <image :src="business.avatar_cdn" />
          {{ business.nickname }}
        </view>
      </view>

      <view class="validate-input">
        <uv-input :placeholder="placeholderText" v-model="code">
          <!-- #ifndef H5 -->
          <template #suffix>
            <uv-icon size="28" name="scan" @click="onScanCode"></uv-icon>
          </template>
          <!-- #endif -->
        </uv-input>
      </view>
    </view>

    <view class="validate">
      <uv-button
        :customStyle="validateBtn"
        :plain="true"
        text="开始验证"
        @click="onValidate"
      ></uv-button>
    </view>
  </view>

  <!-- 消息提示 -->
  <uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
// this
const { proxy } = getCurrentInstance();
// 获取用户信息
const business = proxy.$business;
// 输入框的内容 根据不同平台更换
// #ifndef H5
const placeholderText = ref("请输入防伪码或者扫防伪码");
// #endif

// #ifdef H5
const placeholderText = ref("请输入防伪码");
// #endif
// 验证按钮的样式
const validateBtn = ref({
  width: "100%",
  height: "100%",
  background: "transparent",
  color: "#fff",
  border: "0px",
});
// 防伪码
const code = ref("");
// 消息提示
const NoticeRef = ref(null);

// #ifndef H5
// 在H5平台不会出现扫码功能
const onScanCode = () => {
  // 判断用户是否登录
  if (business.value.hasOwnProperty("id") === false) {
    NoticeRef.value.show({
      type: "error",
      message: "请先登录",
    });
    return;
  }
  uni.scanCode({
    success: (res) => {
      // 获取二维码的指定路径
      const path = res?.path ? res.path : "";
      // 跳转到详情页
      uni.$uv.route(path);
    },
  });
};
// #endif

// 跳转到验证详情页面
const onValidate = () => {
  // 去除左右两端的空格
  code.value = uni.$uv.trim(code.value);

  // 判断用户是否登录
  if (business.value.hasOwnProperty("id") === false) {
    NoticeRef.value.show({
      type: "error",
      message: "请先登录",
    });
    return;
  }
  // 没输入内容
  if (!code.value) {
    NoticeRef.value.show({
      type: "error",
      message: "请输入防伪码",
    });
    return;
  }
  // 跳转到详情页
  proxy.$uv.route("pages/validate/info", { code: code.value });
};

// 跳转到个人页面
const ToBusiness = () => {
  proxy.$uv.route("pages/business/index");
};
</script>

<style>
.header {
  height: 90vw;
  background: linear-gradient(to bottom, #ffc0cb 0%, #91cbf8 100%);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-top: 10vh;
}

.header .list {
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.header .list .left {
  margin-left: 20px;
  color: #2879fc;
}

.header .list .left .title {
  margin-bottom: 10px;
}

.header .list .right {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0 5px 0 10px;
  color: #469eff;
  font-size: 12px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  height: 35px;
}

.header .list .right image {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.header .validate-input {
  width: 80%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 20vw;
}

.validate {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: #2879fc;
  margin: 0 auto;
  margin-top: -50px;
  box-shadow: 0px 0px 10px 10px #eee;
}

:deep(.uv-button-wrapper) {
  height: 100%;
}
</style>